<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--enctype="application/json"-->
<form action="/api/addServiceIp" method="post">
    New Services<br/>
    <textarea rows="6" cols="50" name="ipv4v6"></textarea><br/>
    <input type="submit" value="Add" />
</form>
<br/>

<div id="services"></div>
<script src="/static/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
    $.get("/api/showServiceIP",function (response, status, xhr) {
        services = "Services " + response.length + "<br/>"
        services += "<table border=\"1\"><tr><th>Service IP</th><th>Alive</th><th>DetectCount</th><th>ReportCount</th><th>LastSeen</th><th>RttDuration</th><th>RttOutboundTimestamp</th></tr>"

        $.each(response, function(index, item) {
            services += "<tr><td><form action=\"/api/delServiceIp\" method=\"post\">"
            services += "<input type=\"submit\" value=\"Delete\" />"
            services += "<input type=\"text\" name='ipv4v6' style='width:280px' readonly value='" + item["Address"] + "'/></form></td>"
            services += "<td>" + item["Alive"] + "</td>"
            services += "<td>" + item["DetectCount"] + "</td>"
            services += "<td>" + item["ReportCount"] + "</td>"
            services += "<td>" + item["LastSeen"] + "</td>"
            services += "<td>" + item["RttDuration"] + "</td>"
            services += "<td>" + item["RttOutboundTimestamp"] + "</td>"
            services += "</tr>"
        })
        services += "</table>"
        $("#services").html(services)
    })
</script>

</body>
</html>